body {
  margin: 0; font-size: 15px;
}

.my-swipe {height: 155px;}

ul, li { margin: 0; padding: 0; list-style: none;}

.layout-container {
  min-height: 100%; padding: 0 0 72px;
  display: flex; flex-direction: column; box-sizing: border-box;
}
.layout-section {
  flex: 1; overflow: hidden;
}
.layout-footer {
  width: 100%; height: 50px;
  position: fixed; bottom: 0; left: 0; z-index: 99;
  font-size: 13px;
  display: flex; justify-content: space-around; align-items: center;
  color: #323232; background-color: #fff; border-top: 1px solid #cecece;
  li {
    display: flex; flex-direction: column; align-items: center;
    &::before {
      width: 25px; height: 22px; margin-bottom: 2px;
      content: ''; background: none center/contain no-repeat
    }
    &.active { color: #1582f6; }
  }

  .icon1::before {
    background-image: url(~@/assets/homei1.png)
  }
  .icon2::before {
    background-image: url(~@/assets/homei2.png)
  }
  .icon3::before {
    background-image: url(~@/assets/homei3.png)
  }
  .icon4::before {
    background-image: url(~@/assets/homei4.png)
  }
  .icon1.active::before {
    background-image: url(~@/assets/homei1s.png)
  }
  .icon2.active::before {
    background-image: url(~@/assets/homei2s.png)
  }
  .icon3.active::before {
    background-image: url(~@/assets/homei3s.png)
  }
  .icon4.active::before {
    background-image: url(~@/assets/homei4s.png)
  }
}

.banner-img {
  display: flex; justify-content: flex-end; height: 155px;
  img { width: 100%; height: 155px;}
}
.banner-text {
  position: absolute; left: 25px; top: 30px; font-size: 18px; color: #fff;
}
.banner-tog {
  height: 27px; line-height: 27px; background-image: linear-gradient(0deg, #ffb62b 0%, #ff9a02 100%);  padding: 0 24px; position: absolute; left: 25px; top: 92px; border-radius: 50px; font-size: 13px; color: #fff;
}


.home-tabs {
  height: 255px; padding: 24px 27px 0; box-sizing: border-box; overflow: auto;
  &-header {
    padding: 0 16px; display: flex; justify-content: space-between; box-shadow: inset 0 -1px 0 #bfbfbf
  }
}

.home-tab-title {
  position: relative; margin: 0 4px; display: flex; flex-direction: column; align-items: center; color: #1582f6;
  &:nth-child(2) { color: #0298d0; }
  &:nth-child(3) { color: #ffa30f; }
  >img {
    width: 50px; height: 50px
  }
  >span {
    margin: 12px 0; font-size: 15px; line-height: 1; color: #2f2f2f; white-space: nowrap;
  }
  &.active::before {
    position: absolute; right: 0; left: 0; margin: 0 auto;
    width: 48px; height: 3px; bottom: -1px;
    border-radius: 4px; content: ''; background-color: currentColor
  }
  &.active::after {
    position: absolute; right: 0; left: 0; margin: 0 auto; top: calc(100%); content: '';
    width: 0; height: 0; border: solid transparent; border-width: 6px; border-bottom-width: 0; border-top-color: currentColor;
  }
}


.home-tab-body {
  flex-direction: column;color: #1582f6;
  &:nth-child(2) { color: #0298d0; }
  &:nth-child(3) { color: #ffa30f; }
  >input {
    width: 100%; height: 39px; padding: 0 20px; margin: 22px 0; line-height: 39px;
    border: 1px solid; font-size: 14px; box-sizing: border-box;
    &::-webkit-input-placeholder {
      color: #c0c0c0;
    }
  }
  >button {
    width: 100%; height: 43px;
    border-width: 0; border-radius: 3px; font-size: 15px; text-indent: .5em; letter-spacing: .5em;
    display: flex; justify-content: center; align-items: center; color: inherit; background-color: currentColor
  }
  >button::after {
    content: attr(label); color: #fff
  }
}


.home-tab-list {
  margin-top: 2.05rem; display: flex; justify-content: space-between;
  &::after,&::before {
    content: ''
  }
  &__item {
    display: flex; flex-direction: column; align-items: center;
    >img {
      width: 47px; height: 47px;
    }
    >span {
      margin-top: 13px;
      font-size: 13px;
      color: #323232;
      text-align: center;
    }
    &.active {
      border-radius: .15rem;
      box-shadow: 0 0 0 .4rem;
      background-color: currentColor;
      color: #ffe6ce
    }
  }
}
.home-tab-list+button {
  margin-top: 1.3rem
}

.ques-list {
  margin-bottom: 18px;
  ::v-deep .van-cell__title { display: flex; align-items:center;}
  .van-collapse-item--border::after { border-top-color: #cdcdcd; }
  ::v-deep .van-collapse-item__content { padding: 0px 24px 12px 42px; }
  ::v-deep .van-collapse-item__title::after { display: none; }
  ::v-deep .van-cell--clickable:active { background: none;}
  ::v-deep .van-cell__right-icon { color: #333;}
  .imgtit { width: 19px; margin: 2px 6px 0 0; }
  &::after {
    display: none;
  }
}

.home-que-tit {
  line-height: 47px; margin: 0 16px; font-size: 16px; border-bottom: solid 1px #cdcdcd;
}

.home-error-msg {
  margin: 10px 0 10px; color: #ee0a24; font-size: 14px; text-align: center; font-weight: bold;
}

.home-copy {
  margin-bottom: 8px; color: #8f8f8f; font-size: 13px; text-align: center;
}
.home-phone {
  margin-bottom: 14px; color: #2785ff; font-size: 13px; text-align: center;
}

.ban-head {
  .banner-img {
    display: flex; justify-content: flex-end;
    img { width: 100%; }
  }
  .banner-text {
    position: absolute; left: 25px; top: 30px; font-size: 18px; color: #fff;
  }
}

.com-contain {
  padding: 0 16px 10px; margin: 15px;  background-color: #fff;
}
.com-tit {
  line-height: 50px; font-size: 16px;
}
.com-para {
  margin: 0px 0 14px; font-size: 14px; text-indent: 2em;
  .link { color: #1582f6;}
}

.form {
  &-label {
    line-height: 40px; font-size: 15px;
    .required { margin-right: 6px; color: #ff1f1f; font-size: 20px; vertical-align: middle; }
    &+.van-uploader {
      margin-bottom: 16px;
    }
  }
  &-input {
    margin: 0 5px 0 6px; background-color: #f2f3f9; flex: 1; //border: solid 1px #9b9b9b;
    ::v-deep input {
      width: 100%; padding: 0 14px; height: 38px; border: none; box-sizing: border-box; background: none;
      &::-webkit-input-placeholder { color: #c0c0c0; }
    }
  }
  &-input-flex {
    display: flex; margin-bottom: 10px;
    .form-row { margin: 0 5px 0 6px; padding: 0 0 0 14px; background-color: #f2f3f9; flex: 1; height: 39px; line-height: 39px; background-color: #f2f3f9; color: #333; }
    .form-add, .form-cut { width: 47px; height: 39px; background: #f2f3f9 no-repeat center center/24px auto; position: relative; }
    .form-add {
      &::before, &::after { width: 12px; height: 2px; background: #5f5f5f; position: absolute; left: 17px; top: 49%; content: ""; }
      &::after { transform: rotate(90deg);}
    }
    .form-cut {
      &::before { width: 12px; height: 2px; background: #5f5f5f; position: absolute; left: 17px; top: 49%; content: ""; }
    }
  }
  &-btns {
    display: flex; justify-content: center; margin-bottom: 12px;
    button {
      height: 35px; margin: 0 7px; padding: 0 35px; border: solid 1px #2785ff; border-radius: 3px; background: none; color: #2785ff; font-size: 15px;
      &.primary { background-color: #2785ff; color: #fff;}
    }
  }
}

.upload-btn {
  height: 14px; margin:  0 6px 0 12px; position: relative; top: 2px;
}
.upload-info {
  color: #d5d6dc; font-size: 13px;
}

.empty-page {
  height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 13px; text-align: center;
  img { width: 187px; margin-bottom: 20px;}
}



.old {
  .banner-text { font-size: 22px; top: 24px; }
  .banner-tog {
    padding: 0 12px; top: 94px; font-size: 18px;height: 35px; line-height: 35px;
    &::before { content: "退出";}
  }
  .layout-footer {
    font-size: 18px; line-height: 20px; height: 70px;
    li {
      &::before {
        width: 25px; height: 32px; margin-bottom: 2px;
      }
    }
  }

  .home-tab-title > span { font-size: 22px; }
  .home-tab-body {
    > input { font-size: 18px; }
    > button { font-size: 22px; }
  }
  .home-tab-list__item > span { font-size: 18px; }
  .home-que-tit {
    font-size: 22px;
  }
  .ques-list {
    ::v-deep .van-cell__title { line-height: 29px; font-size: 22px; }
    ::v-deep .van-collapse-item__content { font-size: 18px; }
  }
  .home-error-msg { margin: 20px 0 20px 0; font-size: 20px; }
  .home-copy { margin: 0 20px; font-size: 20px; }
  .home-phone { font-size: 18px; }

  .empty-page {
    font-size: 20px;
    .empty-info { width: 180px;}
  }

  .com-tit { line-height: 53px; font-size: 22px; }
  .com-para { font-size: 20px; }
  .form-label { font-size: 20px; }
  .form-input ::v-deep input { font-size: 20px; }
  .form-btns button { font-size: 22px;}
}
